﻿<style>
    .clone-parent {
        background-color: #eee;
        min-height: 40px;
        padding: 5px 0 10px 0
    }

    .clone-item {
        margin: 5px;
        padding: 0.75rem 1.25rem;
        margin-bottom: -1px;
        border: 1px solid rgba(0,0,0,.125);
    }

    .clone-white-color {
        background-color: #ffffff;
    }

    .clone-blue-color {
        background-color: #5CBBF6;
    }

</style>

<MButton OnClick=@(()=>{ AddData(mDragZone1,1); })> container1 add</MButton>
<MButton OnClick=@(()=>{ AddData(mDragZone2,2); })> container2 add</MButton>
<MContainer>
    <MRow>
        <MCol Cols=6>
            <MDragZone Group="group_oninit" Pull="clone" @ref=mDragZone1>
                <MDragItem>
                    <MCard Class="clone-item">
                        <MCardTitle>item1 init title1</MCardTitle>
                        <MCardText>item1 init text1</MCardText>
                    </MCard>
                </MDragItem>
                <MDragItem>
                    <MCard Class="clone-item">
                        <MCardTitle>item1 init title2</MCardTitle>
                        <MCardText>tem1 init text2</MCardText>
                    </MCard>
                </MDragItem>
            </MDragZone>
        </MCol>
        <MCol Cols=6>
            <MDragZone Group="group_oninit" Pull="clone" @ref=mDragZone2>
                <MDragItem>
                    <MCard Class="clone-item">
                        <MCardTitle>item2 init title1</MCardTitle>
                        <MCardText>item1 init text1</MCardText>
                    </MCard>
                </MDragItem>
                <MDragItem>
                    <MCard Class="clone-item">
                        <MCardTitle>item2 init title2</MCardTitle>
                        <MCardText>tem2 init text2</MCardText>
                    </MCard>
                </MDragItem>
            </MDragZone>
        </MCol>
    </MRow>
</MContainer>


@code {
    private MDragZone mDragZone1;
    private MDragZone mDragZone2;
    private int total = 3;

    private void AddData(MDragZone container, int index)
    {
        var insert = new MDragItem
            {
                Id = Guid.NewGuid().ToString("N"),
                ChildContent = CreateCard(container, "-", index, total++)
            };

        container.Add(insert);
        StateHasChanged();
    }

    private RenderFragment CreateCard(MDragZone container, string split, int containerIndex, int index) => builder =>
          {
              int i = 0;
              builder.OpenComponent<MCard>(i++);
              builder.AddAttribute(i++, "IsDark", container.IsDark);
              builder.AddAttribute(i++, "Class", "clone-item");
              builder.AddAttribute(i++, "ChildContent", CreateComponent("-", containerIndex, index));
              builder.CloseComponent();
          };

    private RenderFragment CreateComponent(string split, int containerIndex, int index) => builder =>
         {
             int i = 0;
             builder.OpenComponent<MCardTitle>(i++);
             builder.AddAttribute(i++, "ChildContent", CreateText($"item {containerIndex} title {split}{index}"));
             builder.CloseComponent();

             builder.OpenComponent<MCardText>(i++);
             builder.AddAttribute(i++, "ChildContent", CreateText($"item {containerIndex} text {split}{index}"));
             builder.CloseComponent();
         };

    private RenderFragment CreateText(string name) => builder =>
        {
            builder.AddContent(0, $"{name}");
        };
}